<template>
  <div class="modelD">
    <PageTitle :title="'Model Development'">
      <template  v-slot:operate>
        <n-button-group>
          <n-button round size="large" @click="$router.push('/modelD/workSpace')">
            <Computer theme="outline" size="20" :strokeWidth="3"/>
            <span class="title-operate--text">Workspace</span>
          </n-button>
          <n-button round size="large" @click="$router.push('/modelD/dispatcher')">
            <TreeDiagram theme="outline" size="20" :strokeWidth="3"/>
            <span class="title-operate--text">Dispatcher</span>
          </n-button>
          <n-button round size="large" @click="$router.push('/modelD/registry')">
            <ChartHistogramTwo theme="outline" size="20" :strokeWidth="3"/>
            <span class="title-operate--text">Registry</span>
          </n-button>
        </n-button-group>
      </template>
    </PageTitle>
    <div class="modelD-warp">
      <router-view/>
    </div>
  </div>
</template>

<script setup>
import { Computer,TreeDiagram,ChartHistogramTwo } from '@icon-park/vue-next'
import { NButtonGroup, NButton } from 'naive-ui'
import PageTitle from '@/components/PageTitle'


</script>

<style scoped>
.modelD {
  padding: 0 var(--lrWhite);
  display: flex;
  flex-direction: column;
  height: 80vh;
}
.title-operate--text {
  margin-left: 6px;
}
.modelD-warp {
  flex: 1;
  margin-top: 20px;
}
</style>
